<template>
  <div class="movie-card-container group cursor-pointer w-full" @click="$emit('click')">
    <!-- 封面图片卡片 -->
    <div class="movie-card aspect-[2/3] flex flex-col">
      <div class="relative flex-1">
        <LazyImage
          :src="coverUrl"
          :alt="title"
          class="w-full h-full rounded-xl"
          image-class="w-full h-full object-cover rounded-xl"
          placeholder-class="w-full h-full bg-gradient-to-br from-background-700 to-background-800 animate-pulse"
        />
        <!-- 评分标签 -->
        <div
          class="absolute top-2 left-2 bg-background-900/80 text-text-primary text-xs px-2 py-1 rounded-lg backdrop-blur-sm border border-background-700/50"
        >
          ⭐ {{ rating }}
        </div>
        <!-- AI标签（受全局偏好控制） -->
        <div class="absolute top-2 right-2" v-if="isAi && showAiLabel">
          <span class="ai-badge">AI</span>
        </div>
        <!-- 播放按钮 -->
        <div
          class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-normal bg-background-900/20 rounded-xl"
        >
          <div class="glass rounded-full p-3">
            <svg
              class="w-8 h-8 text-text-primary"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              viewBox="0 0 24 24"
            >
              <polygon points="9.5,7.5 16.5,12 9.5,16.5" fill="currentColor" />
            </svg>
          </div>
        </div>
      </div>
    </div>

    <!-- 内容信息区域 - 移到卡片外部 -->
    <div class="mt-2 space-y-1.5">
      <!-- 标题 -->
      <div
        class="text-sm font-semibold text-text-primary leading-tight min-h-[1.5rem] flex items-start"
      >
        <span class="line-clamp-2">{{ title }}</span>
      </div>

      <!-- 标签区域 -->
      <div v-if="showTags && tags.length > 0" class="flex flex-wrap gap-1">
        <span
          v-for="tag in tags.slice(0, 3)"
          :key="tag"
          class="bg-background-700/50 text-xs text-text-secondary px-2 py-0.5 rounded-full border border-background-600/30 no-wrap flex-shrink-0"
        >
          {{ tag }}
        </span>
        <span
          v-if="tags.length > 3"
          class="text-xs text-text-muted px-2 py-0.5 no-wrap flex-shrink-0"
        >
          +{{ tags.length - 3 }}
        </span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { defineProps, defineEmits, computed } from 'vue'
  import { LazyImage } from '../ui'
  import { useUiStore } from '../../store/useUiStore'

  const props = defineProps<{
    coverUrl: string
    title: string
    rating: number | string
    tags: string[]
    isAi?: boolean
    showTags?: boolean
  }>()

  defineEmits<{
    click: []
  }>()

  const uiStore = useUiStore()
  const showAiLabel = computed(() => uiStore.showAiLabel)
</script>

<style scoped>
  /* 确保卡片高度一致 */
  .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
    hyphens: auto;
  }

  /* 确保 aspect-ratio 在所有浏览器中正常工作 */
  .aspect-\[2\/3\] {
    aspect-ratio: 2 / 3;
  }

  /* 防止标签换行 */
  .no-wrap {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    display: inline-block;
  }

  /* 优化标题换行 */
  .movie-card-container .text-sm {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  /* 标签容器优化 */
  .movie-card-container .flex.flex-wrap {
    line-height: 1;
  }
</style>
